<template>
  <div id="app" @click="ClosePage()">
    <router-view></router-view>
    <div>
      <el-dialog title="快捷查询" width="400" :visible.sync="dialogVisible" :before-close="handleClose">
        </el-alert>
        <div>
          <el-input v-model="model_value" placeholder="例如1:DS2310160Z0C + Enter | 例如2: 全部运单" style="border: none;"
            size="medium" @keyup.enter.native="querydata()"></el-input>
        </div>
        <div>
          <div v-for="(item,index) in resultList">
            <div @click="redirect(item)" style="margin: 10px 0px 0px 12px;color: #409EFF;cursor: pointer;">
              {{item.meta.title}}</div>
          </div>
        </div>
        <div>
          <div style="margin: 10px 0px 0px 12px;color: #409EFF;cursor: pointer;" @click="PageJumps(dataList.id)">
            {{dataList.waybill_no}} {{dataList.status| afterTime(dataList.status)}}
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { reqMyMessagesDetail, waybilltransporttransport } from "@/api/message";
import { getToken } from "@/utils/auth"; // 验权(从cookie中获取)
export default {
  name: "App",
  data() {
    return {
      dialogVisible: false,
      RouteJumpList: [],
      model_value: "",
      filteredData: [],
      resultList: [],
      router_opeen: this.$store.state.orderForm.router_open,
      dataList: "",
    };
  },
  filters: {
    afterTime(value) {
      if (value == 0) {
        return "待揽收";
      } else if (value == 1) {
        return "揽收中";
      } else if (value == 2) {
        return "待创建干线";
      } else if (value == 3) {
        return "待发车";
      } else if (value == 4) {
        return "已发车";
      } else if (value == 5) {
        return "待配送";
      } else if (value == 6) {
        return "配送中";
      } else if (value == 7) {
        return "待签收";
      } else if (value == 8) {
        return "已签收";
      } else if (value == 10) {
        return "已完结";
      }
      // return "导出错误数据";
    },
  },
  watch: {
    model_value(item1, item2) {
      if (item1 != "") {
        const matchingObjects = [];
        // 使用关键字将数据数组中的元素进行筛选
        this.$store.state.permission.RouteJump.forEach((item) => {
          if (item.meta && item.meta.title) {
            // 使用toLowerCase()函数将关键字和标题都转换为小写，以不区分大小写进行搜索
            const itemTitle = item.meta.title.toLowerCase();
            const searchTerm = item1.toLowerCase();
            // 使用includes()函数检查标题是否包含关键字
            if (itemTitle.includes(searchTerm)) {
              matchingObjects.push(item);
            }
          }
        });
        this.resultList = matchingObjects;
      } else {
        this.resultList = [];
      }
    },
    "$store.state.orderForm.router_open"(item1, item2) {
      this.$nextTick(() => {
        if (item1 == true) {
          this.dialogVisible = true;
        } else {
          this.dialogVisible = false;
        }
      });
    },
  },
  mounted() {
    let that = this;
    that.router_opeen = this.$store.state.orderForm.router_open;
    document.addEventListener("keydown", that.handleWatchEnter);
    // Vue.prototype.$socket.socket.onmessage = function (event) {
    //   that.$notify({
    //     message: JSON.parse(event.data).content,
    //     offset: 50,
    //     duration: 0,
    //     onClick: () => {
    //       that.showDetailDialog(JSON.parse(event.data));
    //     },
    //     onClose: async () => {
    //       await reqMyMessagesDetail({
    //         message_id: JSON.parse(event.data).message_id + "",
    //       });
    //     },
    //     customClass: "notifyClass",
    //   });
    // };
  },
  methods: {
    // 在全局这事关闭 notify 的弹框
    ClosePage() {
      this.$notify.closeAll();
    },
    redirect(data) {
      this.$router.push({ name: data.urL });
      this.dialogVisible = false;
      this.model_value = "";
      this.resultList = [];
    },
    handleClose() {
      this.dialogVisible = false;
      this.$store.commit("ROUTER_OPEN", { type: false });
    },
    PageJumps(id) {
      this.model_value = "";
      this.dataList = "";
      this.dialogVisible = false;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id },
      });
      window.open(text.href, "_blank");
    },
    querydata() {
      var param = {
        waybill_no: this.model_value,
      };
      waybilltransporttransport(param).then((res) => {
        this.dataList = res.data.data.waybill;
      });
    },
    handleWatchEnter(e) {
      if (getToken("Token")) {
        if (e.ctrlKey && e.key == "b") {
          this.dialogVisible = true;
        }
      }
    },
    async showDetailDialog(val) {
      let res = await reqMyMessagesDetail({
        message_id: val.message_id + "",
      });
      if (res.data.jump_link) {
        this.$confirm(res.data.body, "消息通知", {
          cancelButtonText: "关闭",
          confirmButtonText: "去处理",
          customClass: "dialogClass",
        })
          .then(() => {
            window.open(res.data.jump_link, "_blank");
          })
          .catch(() => {});
      } else {
        this.$alert(res.data.body, "消息通知", {
          confirmButtonText: "关闭",
          customClass: "dialogClass",
          callback: (action) => {},
        });
      }
    },
    querySearchAsync() {
      this.$nextTick(() => {
        var permisData = this.$store.state.permission;
        this.RouteJumpList = permisData.RouteJump;
      });
    },
  },
  fuzzySearch(keyword, data) {
    // 遍历数据数组
    for (const item of data) {
      const title = item.meta.title;
      // 如果title包含关键词，将该项返回
      if (title.includes(keyword)) {
        return item;
      }
    }

    // 如果没有匹配项，返回null或适当的默认值
    return null;
  },
};
</script>

<style lang="less">
@import "./style/variables";
@import "./style/element-ui";
@import "./style/common";
@import "./style/scrollBar";

#nprogress .bar {
  background: @primaryColor !important;
}

/deep/.menu_content {
  width: 99.9% !important;
}

.dialogClass {
  p {
    word-wrap: break-word !important;
  }
}

.notifyClass {
  border-left: 5px #409eff solid !important;
  width: 410px !important;

  p {
    word-wrap: break-word !important;
    width: 330px !important;
  }
}
</style>